<template>
    <view class="container">
      <uni-section title="基本信息" type="line" titleFontSize="large"></uni-section>
      <view class="elderInfo">
        <view class="top-container">
          <view class="infoLeft">
            <view>姓名:<text>张伟</text></view>
            <u-line></u-line>
            <view>性别:<text>男</text></view>
            <u-line></u-line>
            <view>工号:<text>100200300</text></view>
            <u-line></u-line>
            <view>联系电话:<text>13800000000</text></view>
            <u-line></u-line>
            <view>隶属机构:<text>xxxx公司xxx部门</text>
            </view>
          </view>
          <view class="img">
            <image :src="avatar" alt="" @click="handleToAvatar"></image>
          </view>
        </view>
      </view>
      <uni-section title="工作数据" type="line" titleFontSize="large"></uni-section>
      <view class="infoBottom">
        <view class="infoBottomLeft">
          <view>今日好评:<text>40条</text></view>
          <u-line></u-line>
          <view>服务次数:<text>80次</text></view>
          <u-line></u-line>
          <view>好评率:<text>80%</text></view>
          <u-line></u-line>
          <view>综合指数:</view>
        </view>
        <u-rate :count="count" v-model="value" size="25" ></u-rate>
      </view>
    </view>
  </template>
  <script>
  export default {
    data() {
      return {
        count: 5,
				value: 4
      }
    },
    methods: {
      handleToAvatar() {
        this.$tab.navigateTo('/pages/elderAvatar/index')
      },
    },
    computed: {
      avatar() {
        return this.$store.state.user.elderAvatar
      }
    },
  }
  </script>
  <style lang="scss" scoped>
  page {
      background-color: #fff;
  }
  .container {
    height: 100vh;
    padding: 1%;
    overflow: hidden;
  
    .elderInfo {
      display: flex;
      flex-direction: column;
      height: 100;
      box-shadow: 0px 0px 1px 2px #ccc;
      border-radius: 5%;
      overflow: hidden;
      margin-bottom: 1%;
  
      .top-container {
        display: flex;
        flex: 1;
        padding: 3%;
  
        .infoLeft {
          flex: 2;
  
          view {
            // 信息标注
            margin: 5% 0;
            font-size: large;
            font-weight: 500;
  
            text {
              // 信息内容
              margin-left: 5%;
  
            }
          }
        }
  
        .img {
          flex: 1;
          height: 160px;
          width: 100%;
          border: #ccc solid 3px;
          margin-top: 2%;
          border-radius: 7%;
  
          image {
            width: 100%;
            height: 100%;
            // padding: 10% 0 0 0;
            border-radius: 5%;
          }
        }
  
      }
    }
  
    .infoBottom {
      // background-color: #c0c0c0;
      padding: 1%;
      background-color: #fff;
  
      view {
        // 信息标注
        margin: 5% 0;
        padding: 0% 1%;
        font-size: large;
        font-weight: 500;
  
        text {
          // 信息内容
          margin-left: 5%;
  
        }
      }
    }
  }
  </style>